<template>
    <div>
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="销售统计" text2="订单统计" :text3="username"/>
        <div class="picker">
            时间范围
            <el-date-picker
            v-model="value"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00']">
            </el-date-picker>
            <el-button type="primary" @click="clickquery">查询</el-button>
        </div>
        
        <div class="order-statistics-content">
             <div id="myChart" :style="{width: '800px', height: '400px',marginTop:'25px'}"></div>
        </div>
       
    </div>
    
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {orderordertotal} from "@/apis/api"
    import {conversionTime} from "@/utlis/utlis"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"",
            username:"",
            value: '',
        }
    },
    created(){
      this.portrait=imgUrl
      this.username=account
    },

    mounted(){
    this.drawLine();
    },

    methods:{
         drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
             myChart.setOption({
                 title: {
                text: '一天接单数据',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                }
            },
            visualMap: {
                show: false,
                dimension: 0,
                pieces: [{
                    lte: 6,
                    color: 'green'
                }, {
                    gt: 6,
                    lte: 8,
                    color: 'red'
                }, {
                    gt: 8,
                    lte: 14,
                    color: 'green'
                }, {
                    gt: 14,
                    lte: 17,
                    color: 'red'
                }, {
                    gt: 17,
                    color: 'green'
                }]
            },
            series: [
                {
                    name: '订单金额',
                    type: 'line',
                    smooth: true,
                    data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                    markArea: {
                        // itemStyle: {
                        //     color: 'rgba(255, 173, 177, 0.4)'
                        // },
                        // data: [ [{
                        //     name: '早高峰',
                        //     xAxis: '07:30'
                        // }, {
                        //     xAxis: '10:00'
                        // }], [{
                        //     name: '晚高峰',
                        //     xAxis: '17:30'
                        // }, {
                        //     xAxis: '21:15'
                        // }] ]
                    }
                }
            ]
               
               
               
               
             })
         },

         clickquery(){
            //  console.log(this.value)
             orderordertotal({
                date:JSON.stringify(this.value)
            }).then(res=>{
                console.log(res.data.data)

            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
             myChart.setOption({
                 title: {
                text: '一天接单数据',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.data.map(v=>conversionTime(v.orderTime))
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                }
            },
            visualMap: {
                show: false,
                dimension: 0,
                pieces: [{
                    lte: 6,
                    color: 'green'
                }, {
                    gt: 6,
                    lte: 8,
                    color: 'red'
                }, {
                    gt: 8,
                    lte: 14,
                    color: 'green'
                }, {
                    gt: 14,
                    lte: 17,
                    color: 'red'
                }, {
                    gt: 17,
                    color: 'green'
                }]
            },
            series: [
                {
                    name: '订单金额',
                    type: 'line',
                    smooth: true,
                    data: res.data.data.map(v=>v.orderAmount),
                    markArea: {
                        // itemStyle: {
                        //     color: 'rgba(255, 173, 177, 0.4)'
                        // },
                        // data: [ [{
                        //     name: '早高峰',
                        //     xAxis: '07:30'
                        // }, {
                        //     xAxis: '10:00'
                        // }], [{
                        //     name: '晚高峰',
                        //     xAxis: '17:30'
                        // }, {
                        //     xAxis: '21:15'
                        // }] ]
                    }
                }
            ]
        })
    })
    }
    
    }
}

</script>

<style lang=less scoped>
    .picker{
        margin-top:20px;
        margin-left:30px;
        color:dimgrey;
    }
    .el-button{
        margin-left:20px;
        width:80px;
    } 
    .order-statistics-content{
        margin:20px;
        padding:10px;
        background-color:#fff;
    }
</style>